<template>
  <div>
    <el-dialog :title="title"
      :visible.sync="dialogVisible"
      width="50%"
      top="5vh"
      @close.native="cancel"
      :close-on-click-modal="false">
      <el-form ref="ruleForm"
        :model="form"
        :rules="rules"
        label-width="160px">
        <el-form-item prop="name">
          <template slot="label">
            <span>单位名称</span>
            <el-tooltip class="item"
              effect="dark"
              content="管理单位的正式完整名称，不可简写"
              placement="top">
              <i class="el-icon-question"
                style="color:#2c68ff" />
            </el-tooltip>
            <span>:</span>
          </template>
          <el-input v-model="form.name"
            placeholder="请输入"
            :disabled="isLook=='look'" />
        </el-form-item>
        <el-form-item prop="isManage"
          label="是否为管理单位:">
          <el-radio-group v-model="form.isManage">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="type">
          <template slot="label">
            <span>单位类型</span>
            <el-tooltip class="item"
              effect="dark"
              content="院校、科研院所、训练机构、其他等"
              placement="top">
              <i class="el-icon-question"
                style="color:#2c68ff" />
            </el-tooltip>
            <span>:</span>
          </template>
          <el-input v-model="form.type"
            placeholder="请输入"
            :disabled="isLook=='look'" />
        </el-form-item>
        <el-form-item prop="upName">
          <template slot="label">
            <span>上级单位</span>
            <el-tooltip class="item"
              effect="dark"
              content="管理单位的直接上级单位"
              placement="top">
              <i class="el-icon-question"
                style="color:#2c68ff" />
            </el-tooltip>
            <span>:</span>
          </template>
          <el-input v-model="form.upName"
            placeholder="请输入"
            type="textarea"
            rows="3"
            :disabled="isLook=='look'" />
        </el-form-item>
        <el-form-item prop="bigName">
          <template slot="label">
            <span>所属大单位</span>
            <el-tooltip class="item"
              effect="dark"
              content="管理单位所属大单位名称"
              placement="top">
              <i class="el-icon-question"
                style="color:#2c68ff" />
            </el-tooltip>
            <span>:</span>
          </template>
          <el-input v-model="form.bigName"
            placeholder="请输入"
            :disabled="isLook=='look'" />
        </el-form-item>
        <el-form-item prop="area">
          <template slot="label">
            <span>所在地区</span>
            <el-tooltip class="item"
              effect="dark"
              content="管理单位所在行政区域，如果单位分设在不同地点时，填写单位法定代表人办公室所在行政区域，具体到区（县）"
              placement="top">
              <i class="el-icon-question"
                style="color:#2c68ff" />
            </el-tooltip>
            <span>:</span>
          </template>
          <el-input v-model="form.area"
            placeholder="请输入"
            :disabled="isLook=='look'" />
        </el-form-item>
        <el-form-item prop="address">
          <template slot="label">
            <span>通信地址</span>
            <el-tooltip class="item"
              effect="dark"
              content="管理单位所在地的详细地址，如果单位分设在不同地点时，填写单位法定代表人办公室所在地址"
              placement="top">
              <i class="el-icon-question"
                style="color:#2c68ff" />
            </el-tooltip>
            <span>:</span>
          </template>
          <el-input v-model="form.address"
            placeholder="请输入"
            :disabled="isLook=='look'" />
        </el-form-item>
        <el-form-item prop="code">
          <template slot="label">
            <span>邮政编码</span>
            <el-tooltip class="item"
              effect="dark"
              content="单位所在地区邮政编码"
              placement="top">
              <i class="el-icon-question"
                style="color:#2c68ff" />
            </el-tooltip>
            <span>:</span>
          </template>
          <el-input v-model="form.code"
            placeholder="请输入"
            :disabled="isLook=='look'" />
        </el-form-item>
        <el-form-item prop="people">
          <template slot="label">
            <span>联系人姓名</span>
            <el-tooltip class="item"
              effect="dark"
              content="管理单位负责科研设施与仪器共享管理的人员"
              placement="top">
              <i class="el-icon-question"
                style="color:#2c68ff" />
            </el-tooltip>
            <span>:</span>
          </template>
          <el-input v-model="form.people"
            placeholder="请输入"
            :disabled="isLook=='look'" />
        </el-form-item>
        <el-form-item prop="phone">
          <template slot="label">
            <span>办公电话</span>
            <el-tooltip class="item"
              effect="dark"
              content="管理单位负责科研设施与仪器共享管理的人员的办公电话"
              placement="top">
              <i class="el-icon-question"
                style="color:#2c68ff" />
            </el-tooltip>
            <span>:</span>
          </template>
          <el-input v-model="form.phone"
            placeholder="请输入"
            :disabled="isLook=='look'" />
        </el-form-item>
        <el-form-item prop="moblie">
          <template slot="label">
            <span>移动电话</span>
            <el-tooltip class="item"
              effect="dark"
              content="管理单位负责科研设施与仪器共享管理的人员的移动电话"
              placement="top">
              <i class="el-icon-question"
                style="color:#2c68ff" />
            </el-tooltip>
            <span>:</span>
          </template>
          <el-input v-model="form.moblie"
            placeholder="请输入"
            :disabled="isLook=='look'" />
        </el-form-item>
      </el-form>
      <div slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="submitForm"
          v-if="isLook!=='look'">确 定</el-button>
        <el-button @click="
          cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { uploadFile } from '@/api/common.js'
import {
  insertArticle,
  editArticle
  // articleDetail
} from '@/api/publishManage.js'
export default {
  data() {
    return {
      dialogVisible: false,
      isLook: '',
      accept: '*',
      title: '',
      form: {
        title: '',
        department: '',
        name: '',
        workPhone: '',
        phone: '',
        fileId: null,
        fileName: null
      },
      facilityType: ['政策法规', '管理制度'],
      file: null,
      rules: {
        name: [
          { required: true, message: '单位名称不能为空！', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '单位类型不能为空！', trigger: 'blur' }
        ],
        upName: [
          { required: true, message: '上级单位不能为空！', trigger: 'blur' }
        ],
        bigName: [
          { required: true, message: '所属大单位不能为空', trigger: 'blur' }
        ],
        area: [
          { required: true, message: '所在地区不能为空', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '通信地址不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '邮政编码不能为空', trigger: 'blur' }
        ],
        people: [
          { required: true, message: '联系人姓名不能为空', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '办公电话不能为空', trigger: 'blur' }
        ],
        moblie: [
          { required: true, message: '移动电话不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {},
  methods: {
    show(obj) {
      this.dialogVisible = true
      this.title = obj.title
      this.isLook = obj.isLook
      if (obj.data) {
        this.form = Object.assign(obj.data)
        // articleDetail({ articleId: obj.data.articleId }).then(res => {
        //   this.form = res.data
        // })
      }
    },
    submitForm() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          if (this.file) {
            const formData = new FormData()
            formData.append('file', this.file)
            formData.append('pathType', this.file.name.split('.').pop())
            uploadFile(formData).then(res => {
              this.form.fileId = res.data.fileId
              if (this.form.articleId) {
                editArticle(this.form).then(() => {
                  this.cancel()
                })
              } else {
                insertArticle(this.form).then(() => {
                  this.cancel()
                })
              }
            })
          } else {
            if (this.form.articleId) {
              editArticle(this.form).then(() => {
                this.cancel()
              })
            } else {
              insertArticle(this.form).then(() => {
                this.cancel()
              })
            }
          }
        } else {
          return false
        }
      })
    },
    cancel() {
      this.form = this.$options.data().form
      this.$refs.ruleForm.clearValidate()
      this.dialogVisible = false
      this.isLook = false
      this.file = null
      this.$emit('close')
    },
    handleChange(file) {
      this.file = file.raw
      this.form.fileName = file.name
    },
    // 多次上传覆盖
    handleExceed(file) {
      console.log('[ file ] >', file)
      this.$refs.uploadRef.clearFiles()
      // this.handleChange(file[0])
      this.file = file[0]
      this.form.fileName = file[0].name
    },
    downloadLink(item) {
      this.downloadByUrl(item.fileName, item.filePath)
    },
    closeFile() {
      this.file = null
      this.$refs.uploadRef.clearFiles()
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.el-table .cell) {
  font-size: 16px;
}
:deep(.el-table th > .cell) {
  font-size: 18px;
}
</style>
